<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 300px;
            
            display: block;
            margin-bottom: 10px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <img class="preload" 
        src="../assets/img/loading.gif" 
        data-src="https://img2.baidu.com/it/u=3790341833,2407789859&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        style="border: 6px solid red;"
    >
    <script>
        let imgs = document.querySelectorAll(".preload")
        imgs.forEach(img => {
            let cusStyle = img.style.cssText;
            img.style.cssText=cusStyle+"object-fit: scale-down;object-position: center;background-color: #dedede;";

            // img.getAttribute("data-src")
            let imgSrc = img.dataset.src;
            // console.log(imgSrc);
            // ……
            // let tempImg = document.createElement("img")
            let tempImg = new Image();
            // console.log(tempImg)
            tempImg.src = imgSrc
            tempImg.onload = function(){
                // console.log("图片加载完成")
                img.src = imgSrc;
                img.style.cssText = cusStyle;
            }
        })
    </script>
</body>
</html>